<template>
  <div class="chart-div">
    <div id="chartLongitude" class="chart" />
    <LoadingDiv :loadingStatus="loadingStatus" pageStyle="blue" />
  </div>
</template>

<script setup name="chartLongitude">
import { blueColorList, textColor, axisColor, toolTipStyle } from './chartConfig.js';
import * as echarts from 'echarts';
import { ref, markRaw, onMounted, getCurrentInstance } from 'vue';
import { longitudeStatistic } from '@/service/apiHome.js';
import moment from 'moment';
const { appContext } = getCurrentInstance();
const vm = appContext.config.globalProperties;
const loadingStatus = ref('');
onMounted(() => {
  getData();
});

function getData () {
  loadingStatus.value = 'start';
  const params = {
    'endTime': vm.$xwmoment().add(7, 'd').format('YYYY-MM-DD 00:00:00'),
    'startTime': vm.$xwmoment().format('YYYY-MM-DD 00:00:00')
  };
  longitudeStatistic(params).then(res => {
    const { code, data, message } = res.data;
    if (code !== 200) {
      loadingStatus.value = 'error';
      return;
    }
    loadingStatus.value = 'end';
    if (code === 200 && data && data.length) {
      initEchart(data);
    }
  }).catch(res => {
    loadingStatus.value = 'error';
  });
}
function initEchart (data) {
  const myChart = markRaw(echarts.init(document.getElementById('chartLongitude')));
  const seriesData = [];
  data.forEach((item, index) => {
    seriesData.push({
      type: 'line',
      data: item.longitudeDataVOList.map(item1 => {
        const time = new Date(item1.dateTime).getTime();
        return [time, item1.longitudeDiff.toFixed(6)];
      }),
      symbol: 'circle',
      name: item.satId
    });
  });


  const option = {
    tooltip: {//是否显示提示框组件
      trigger: 'axis',//触发类型：坐标轴触发
      borderRadius: 2,//圆角属性
      formatter: function (param) {
        let str = moment(param[0].data[0]).format('YYYY-MM-DD HH:mm:ss') + ' <br>';
        param.forEach(item => {
          str +=
            item.marker + item.seriesName + '：' + item.data[1] + '° <br>';
        });
        return str;
      },
      ...toolTipStyle//使用对象展开运算符合并额外的样式配置。

    },
    grid: {//直角坐标系内绘图网格
      left: '5%',
      right: '5%',
      bottom: '4%',
      top: '20%',
      containLabel: true//grid 区域是否包含坐标轴的刻度标签//true：包含在容器内不溢出//false：不包含在容器内，可能会溢出
    },
    color: blueColorList,
    xAxis: {
      type: 'category',// 类目轴//value:数值轴,time:时间轴，log：对数轴
      axisPointer: {//坐标轴指示器
        type: 'shadow'//阴影指示器//line:直线指示器//none:无指示器
      },
      axisLabel: //坐标刻度标签
        { show: false },
      axisLine: {//坐标轴轴线
        lineStyle: {
          color: axisColor
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '经度(°)',//坐标轴名称
      nameTextStyle: {//坐标轴名称文字样式
        color: textColor
      },
      splitLine: {//坐标轴在 grid 区域中的分隔线
        lineStyle: {
          type: 'dashed',//solid:实线//dashed:虚线//dotted:点线
          color: '#68adff4d'
        }
      },
      axisLabel: {//坐标轴刻度标签
        textStyle: { color: textColor, fontSize: 12 }
      }
    },
    series: seriesData
  };
  myChart.clear();
  option && myChart.setOption(option);
  window.addEventListener(
    'resize',
    () => {
      myChart.resize();
    },
    true
  );
}

</script>
<style lang="less" scoped>
</style>
